<template>
  <div class="count">
    <h2>当前求和为：{{ sum }}</h2>
    <h2>当前名字为：{{ name }}</h2>
    <div class="btn">
      <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="add">加</button>
      <button @click="minus">减</button>
    </div>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref, computed, toRefs } from 'vue'
  import { useCountStore } from '@/store/count'
  import { storeToRefs } from 'pinia'

  const countStore = useCountStore()

  // 数据
  let n = ref(1) // 用户选择的数字
  // 方法
  function add() {
    countStore.sum += n.value
  }
  function minus() {
    countStore.sum -= n.value
  }

  let { sum, name, bigSum, upperName } = storeToRefs(countStore)

console.log(sum, name);
</script>

<style scoped>
  .count {
    background-color: #ffffff; /* 更柔和的背景颜色 */
    border-radius: 15px; /* 更大的圆角 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 更明显的阴影 */
    padding: 20px;
    text-align: center; /* 内容居中 */
    font-family: 'Roboto', sans-serif; /* 字体样式 */
  }

  h2 {
    color: #333;
    margin-bottom: 20px; /* 标题与内容的间距 */
  }

  .btn {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 按钮之间的间距 */
  }

  select,
  button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-align: center;
  }

  select:focus,
  button:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
  }

  button {
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    font-weight: bold; /* 加粗字体 */
  }

  button:hover {
    background-color: #0056b3;
  }
</style>
